<template>
	<view id="tmpl">
		<hd-message-bar :index='3' @on_change="OnChange"></hd-message-bar>
		<view class="mask" style="display: none;">
			<view class="mask-container">
				<view class="title">
					<text>第 03 版 爱海科文化滑动</text>
				</view>

				<view class="ban-list">
					<view class="ban-item">
						<text>关于组织“嘻嘻嘻嘻嘻”系列文化活动</text>
					</view>
					<view class="ban-item">
						<text>关于组织“嘻嘻嘻嘻嘻”系列文化活动</text>
					</view>
					<view class="ban-item">
						<text>关于组织“嘻嘻嘻嘻嘻”系列文化活动</text>
					</view>
				</view>
			</view>
		</view>

		<view class="mask" style="display: none;">
			<view class="mask-container">
				<view class="title">
					<text>往期浏览</text>
				</view>
				<view class="periodical-list">
					<view class="periodical-item">
						<text>2020-09-29</text>
						<view class="periodical-thumb">
							<image src="../../static/image/kaohe-background.png" mode="aspectFill" />
						</view>
					</view>
				</view>

				<view class="pages">
					<view class="prev"></view>
					<view class="page-list">
						<view class="page-item">
							<text>1</text>
						</view>
						<view class="page-item">
							<text>2</text>
						</view>
						<view class="page-item active">
							<text>3</text>
						</view>
						<view class="page-item">
							<text>4</text>
						</view>
						<view class="page-item">
							<text>5</text>
						</view>
					</view>
					<view class="next"></view>
				</view>
			</view>
		</view>

		<view class="container">
			<view class="title">
				<text class="name">我身边的奋斗者</text>
				<text class="ban">第02版</text>
			</view>

			<view class="content">
				<image src="../../static/image/test/periodical.png" mode="widthFix" />
			</view>
		</view>

		<view class="menu">
			<view class="item">
				<view class="icon">
					<image src="../../static/image/icon/kaohe.png" mode="widthFix" />
				</view>
				<view class="title">
					<text>目录</text>
				</view>
			</view>
			<view class="item">
				<view class="icon">
					<image src="../../static/image/icon/kaohe.png" mode="widthFix" />
				</view>
				<view class="title">
					<text>往期</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			onLoad: function() {},
			onShow: function() {
				this.$_if.Initialize(this);
				this.$api.qkxq({
					noticeId:'1',
				}).then((res) => {
					console.log(res)
							
					// console.log(_this.person_list);
				})
			},
			OnChange(item) {
				this.GoToPage('message', item.url);
			},
	
			
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: $background-color-2;
	}

	.container {
		padding-top: 80upx;
		padding-bottom: 80upx;

		.title {
			font-size: $font-size-title;
			color: $font-color-4;
			text-align: center;
			padding: 10upx;

			.ban {
				font-size: $uni-font-size-sm;
				margin-left: 20upx;
			}
		}

		.content {
			image {
				width: 100%;
			}
		}
	}

	.menu {
		position: fixed;
		width: 100%;
		bottom: 0;
		height: 80upx;
		@extend .flex-between;
		text-align: center;
		background-color: #eeeeee;
		color: #227aa2;
		box-shadow: 0 0 3px rgba(0, 0, 0, .3);

		.item {
			flex-grow: 1;
			border-left: solid 1px #d6d6d6;

			&:first-child {
				border-left: 0;
			}
		}

		.icon {
			padding-top: 5px;

			image {
				width: 40upx;
				height: 40upx;
			}
		}

		.title {
			font-size: 10px;
			margin-top: -5px;
		}
	}

	.mask {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .7);
		z-index: 9999;
		color: #5a5a5a;
		font-size: $uni-font-size-base;
		top: 0;

		.mask-container {
			width: 60vw;
			background-color: $background-color-1;
			position: absolute;
			height: 600upx;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.title {
			background-color: #f7f7f7;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			color: #0e6396;
			border-bottom: solid 1px #e9e9e9;
		}

		.ban-list {
			padding: 30upx 20upx;
			overflow-y: scroll;
		}

		.ban-item {
			height: 60upx;
			line-height: 60upx;
			border-bottom: solid 1px #e9e9e9;
			padding: 0 20upx;
		}

		.periodical-list {
			@extend .flex-between;

			.periodical-item {
				text-align: center;
				height: 240upx;
				position: relative;

				.periodical-thumb {
					height: 240upx;
					width: 100%;
					margin-top: -20upx;
					z-index: 1;
					
					image {
						width: 100%;
						height: 240upx;
					}
				}

				text {
					height: 40upx;
					line-height: 40upx;
					color: #000000;
					background-color: rgba(0, 0, 0, .5);
					color: $font-color-1;
					z-index: 99;
				}
			}
		}

		.pages {
			.page-list {
				@extend .flex-between;
				justify-content: center;
			}
		}
	}
</style>
